<template>
  <div class="overdue-reminder">
    <div class="page-header">
      <h1 class="page-title">超期提醒管理</h1>
      <div class="header-actions">
        <el-button type="warning" @click="sendBatchReminder">
          <i class="fas fa-bell mr-2"></i>批量提醒
        </el-button>
        <el-button type="primary" @click="refreshData">
          <i class="fas fa-sync-alt mr-2"></i>刷新
        </el-button>
      </div>
    </div>

    <!-- 超期统计 -->
    <div class="stats-section">
      <div class="stat-card critical">
        <div class="stat-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.criticalOverdue }}</div>
          <div class="stat-label">严重超期</div>
        </div>
      </div>
      <div class="stat-card warning">
        <div class="stat-icon">
          <i class="fas fa-clock"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.warningOverdue }}</div>
          <div class="stat-label">即将超期</div>
        </div>
      </div>
      <div class="stat-card today">
        <div class="stat-icon">
          <i class="fas fa-calendar-day"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.todayDue }}</div>
          <div class="stat-label">今日到期</div>
        </div>
      </div>
      <div class="stat-card total">
        <div class="stat-icon">
          <i class="fas fa-tasks"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalTasks }}</div>
          <div class="stat-label">总任务数</div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-row">
        <el-select v-model="userTypeFilter" placeholder="用户类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="管理员" value="admin"></el-option>
          <el-option label="律师" value="lawyer"></el-option>
        </el-select>
        <el-select v-model="statusFilter" placeholder="超期状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="严重超期" value="critical"></el-option>
          <el-option label="即将超期" value="warning"></el-option>
          <el-option label="今日到期" value="today"></el-option>
        </el-select>
        <el-select v-model="taskTypeFilter" placeholder="任务类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="案件处理" value="case"></el-option>
          <el-option label="文档审核" value="document"></el-option>
          <el-option label="客户回访" value="followup"></el-option>
          <el-option label="报告提交" value="report"></el-option>
        </el-select>
        <el-input
          v-model="searchQuery"
          placeholder="搜索任务或负责人"
          class="search-input"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search"></i>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 超期任务列表 -->
    <div class="tasks-section">
      <div class="section-header">
        <h2 class="section-title">超期任务列表</h2>
        <div class="view-controls">
          <el-radio-group v-model="viewMode" size="small">
            <el-radio-button label="list">列表视图</el-radio-button>
            <el-radio-button label="timeline">时间轴视图</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-if="viewMode === 'list'" class="list-view">
        <el-table :data="filteredTasks" style="width: 100%" :row-class-name="getRowClass">
          <el-table-column prop="id" label="任务ID" width="80"></el-table-column>
          <el-table-column prop="title" label="任务标题" min-width="200">
            <template #default="{ row }">
              <div class="task-title">
                <i :class="getTaskIcon(row.type)" class="task-icon mr-2"></i>
                {{ row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="assignee" label="负责人" width="100">
            <template #default="{ row }">
              <div class="assignee-info">
                <span class="name">{{ row.assignee }}</span>
                <el-tag :type="getUserTypeTag(row.userType)" size="small">
                  {{ getUserTypeText(row.userType) }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="dueDate" label="截止时间" width="120"></el-table-column>
          <el-table-column prop="overdueStatus" label="超期状态" width="120" align="center">
            <template #default="{ row }">
              <el-tag :type="getOverdueStatusType(row.overdueStatus)" size="small">
                {{ getOverdueStatusText(row.overdueStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="overdueDays" label="超期天数" width="100" align="center">
            <template #default="{ row }">
              <span :class="getOverdueDaysClass(row.overdueDays)">
                {{ row.overdueDays > 0 ? `+${row.overdueDays}天` : `${Math.abs(row.overdueDays)}天` }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getPriorityType(row.priority)" size="small">
                {{ getPriorityText(row.priority) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reminderCount" label="提醒次数" width="100" align="center">
            <template #default="{ row }">
              <span class="reminder-count">{{ row.reminderCount }}次</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <el-button size="small" type="warning" @click="sendReminder(row)">
                <i class="fas fa-bell mr-1"></i>发送提醒
              </el-button>
              <el-button size="small" type="primary" @click="viewTask(row)">
                <i class="fas fa-eye mr-1"></i>查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 时间轴视图 -->
      <div v-else class="timeline-view">
        <el-timeline>
          <el-timeline-item
            v-for="task in filteredTasks"
            :key="task.id"
            :timestamp="task.dueDate"
            :type="getTimelineType(task.overdueStatus)"
            placement="top"
          >
            <div class="timeline-card" :class="getTimelineCardClass(task.overdueStatus)">
              <div class="timeline-header">
                <div class="task-info">
                  <h4 class="task-title">
                    <i :class="getTaskIcon(task.type)" class="mr-2"></i>
                    {{ task.title }}
                  </h4>
                  <div class="task-meta">
                    <span class="assignee">负责人：{{ task.assignee }}</span>
                    <el-tag :type="getUserTypeTag(task.userType)" size="small">
                      {{ getUserTypeText(task.userType) }}
                    </el-tag>
                  </div>
                </div>
                <div class="task-status">
                  <el-tag :type="getOverdueStatusType(task.overdueStatus)" size="small">
                    {{ getOverdueStatusText(task.overdueStatus) }}
                  </el-tag>
                  <span :class="getOverdueDaysClass(task.overdueDays)" class="overdue-days">
                    {{ task.overdueDays > 0 ? `超期${task.overdueDays}天` : `还有${Math.abs(task.overdueDays)}天` }}
                  </span>
                </div>
              </div>
              <p class="task-description">{{ task.description }}</p>
              <div class="timeline-actions">
                <el-button size="small" type="warning" @click="sendReminder(task)">
                  <i class="fas fa-bell mr-1"></i>发送提醒
                </el-button>
                <el-button size="small" type="primary" @click="viewTask(task)">
                  <i class="fas fa-eye mr-1"></i>查看详情
                </el-button>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalTasks"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'

export default {
  name: 'OverdueReminder',
  setup() {
    const userTypeFilter = ref('')
    const statusFilter = ref('')
    const taskTypeFilter = ref('')
    const searchQuery = ref('')
    const viewMode = ref('list')
    const currentPage = ref(1)
    const pageSize = ref(20)
    
    const stats = reactive({
      criticalOverdue: 15,
      warningOverdue: 28,
      todayDue: 12,
      totalTasks: 156
    })
    
    const tasks = ref([
      {
        id: 1,
        title: '交通事故赔偿协议审核',
        assignee: '张律师',
        userType: 'lawyer',
        type: 'document',
        dueDate: '2024-02-10',
        overdueStatus: 'critical',
        overdueDays: 6,
        priority: 'high',
        reminderCount: 3,
        description: '需要审核沪C88976交通事故的赔偿协议文件'
      },
      {
        id: 2,
        title: '伤残鉴定报告复核',
        assignee: '李管理员',
        userType: 'admin',
        type: 'case',
        dueDate: '2024-02-14',
        overdueStatus: 'critical',
        overdueDays: 2,
        priority: 'high',
        reminderCount: 2,
        description: '复核华东政法司法鉴定中心的九级伤残认定报告'
      },
      {
        id: 3,
        title: '保险理赔方案审批',
        assignee: '王律师',
        userType: 'lawyer',
        type: 'document',
        dueDate: '2024-02-17',
        overdueStatus: 'warning',
        overdueDays: -1,
        priority: 'medium',
        reminderCount: 1,
        description: '审批平安保险15万元理赔方案'
      },
      {
        id: 4,
        title: '客户回访记录',
        assignee: '陈律师',
        userType: 'lawyer',
        type: 'followup',
        dueDate: '2024-02-16',
        overdueStatus: 'today',
        overdueDays: 0,
        priority: 'low',
        reminderCount: 0,
        description: '回访交通事故受害者张先生的恢复情况'
      },
      {
        id: 5,
        title: '月度案件统计报告',
        assignee: '赵管理员',
        userType: 'admin',
        type: 'report',
        dueDate: '2024-02-18',
        overdueStatus: 'warning',
        overdueDays: -2,
        priority: 'medium',
        reminderCount: 0,
        description: '编制2月份交通事故案件统计分析报告'
      }
    ])
    
    const filteredTasks = computed(() => {
      return tasks.value.filter(task => {
        const matchesUserType = !userTypeFilter.value || task.userType === userTypeFilter.value
        const matchesStatus = !statusFilter.value || task.overdueStatus === statusFilter.value
        const matchesTaskType = !taskTypeFilter.value || task.type === taskTypeFilter.value
        const matchesSearch = !searchQuery.value || 
          task.title.includes(searchQuery.value) ||
          task.assignee.includes(searchQuery.value)
        
        return matchesUserType && matchesStatus && matchesTaskType && matchesSearch
      })
    })
    
    const totalTasks = computed(() => filteredTasks.value.length)
    
    const getRowClass = ({ row }) => {
      const classMap = {
        critical: 'critical-row',
        warning: 'warning-row',
        today: 'today-row'
      }
      return classMap[row.overdueStatus] || ''
    }
    
    const getTaskIcon = (type) => {
      const iconMap = {
        case: 'fas fa-briefcase',
        document: 'fas fa-file-alt',
        followup: 'fas fa-phone',
        report: 'fas fa-chart-bar'
      }
      return iconMap[type] || 'fas fa-tasks'
    }
    
    const getUserTypeTag = (userType) => {
      return userType === 'admin' ? 'warning' : 'primary'
    }
    
    const getUserTypeText = (userType) => {
      return userType === 'admin' ? '管理员' : '律师'
    }
    
    const getOverdueStatusType = (status) => {
      const typeMap = {
        critical: 'danger',
        warning: 'warning',
        today: 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getOverdueStatusText = (status) => {
      const textMap = {
        critical: '严重超期',
        warning: '即将超期',
        today: '今日到期'
      }
      return textMap[status] || '正常'
    }
    
    const getOverdueDaysClass = (days) => {
      if (days > 5) return 'text-red-600 font-bold'
      if (days > 0) return 'text-orange-600 font-semibold'
      if (days === 0) return 'text-blue-600 font-semibold'
      return 'text-green-600'
    }
    
    const getPriorityType = (priority) => {
      const typeMap = {
        high: 'danger',
        medium: 'warning',
        low: 'info'
      }
      return typeMap[priority] || 'info'
    }
    
    const getPriorityText = (priority) => {
      const textMap = {
        high: '高',
        medium: '中',
        low: '低'
      }
      return textMap[priority] || '普通'
    }
    
    const getTimelineType = (status) => {
      const typeMap = {
        critical: 'danger',
        warning: 'warning',
        today: 'primary'
      }
      return typeMap[status] || 'info'
    }
    
    const getTimelineCardClass = (status) => {
      const classMap = {
        critical: 'critical-card',
        warning: 'warning-card',
        today: 'today-card'
      }
      return classMap[status] || ''
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }
    
    const refreshData = () => {
      ElMessage.success('数据已刷新')
    }
    
    const sendReminder = (task) => {
      ElMessage.success(`已向${task.assignee}发送提醒`)
      task.reminderCount++
    }
    
    const sendBatchReminder = () => {
      const overdueCount = filteredTasks.value.filter(t => t.overdueDays > 0).length
      ElMessage.success(`已向${overdueCount}个超期任务的负责人发送批量提醒`)
    }
    
    const viewTask = (task) => {
      ElMessage.info(`查看任务：${task.title}`)
    }
    
    return {
      userTypeFilter,
      statusFilter,
      taskTypeFilter,
      searchQuery,
      viewMode,
      currentPage,
      pageSize,
      stats,
      tasks,
      filteredTasks,
      totalTasks,
      getRowClass,
      getTaskIcon,
      getUserTypeTag,
      getUserTypeText,
      getOverdueStatusType,
      getOverdueStatusText,
      getOverdueDaysClass,
      getPriorityType,
      getPriorityText,
      getTimelineType,
      getTimelineCardClass,
      handleSizeChange,
      handleCurrentChange,
      refreshData,
      sendReminder,
      sendBatchReminder,
      viewTask
    }
  }
}
</script>

<style scoped>
.overdue-reminder {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #e5e7eb;
}

.stat-card.critical {
  border-left-color: #ef4444;
}

.stat-card.warning {
  border-left-color: #f59e0b;
}

.stat-card.today {
  border-left-color: #3b82f6;
}

.stat-card.total {
  border-left-color: #10b981;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #6b7280;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-input {
  flex: 1;
  max-width: 300px;
}

.tasks-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.task-title {
  display: flex;
  align-items: center;
}

.task-icon {
  color: #6b7280;
}

.assignee-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assignee-info .name {
  font-weight: 500;
}

.reminder-count {
  color: #f59e0b;
  font-weight: 500;
}

/* 表格行样式 */
:deep(.critical-row) {
  background-color: #fef2f2 !important;
}

:deep(.warning-row) {
  background-color: #fffbeb !important;
}

:deep(.today-row) {
  background-color: #eff6ff !important;
}

/* 时间轴视图 */
.timeline-view {
  margin-bottom: 20px;
}

.timeline-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 8px;
}

.timeline-card.critical-card {
  border-left: 4px solid #ef4444;
  background-color: #fef2f2;
}

.timeline-card.warning-card {
  border-left: 4px solid #f59e0b;
  background-color: #fffbeb;
}

.timeline-card.today-card {
  border-left: 4px solid #3b82f6;
  background-color: #eff6ff;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.task-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.overdue-days {
  font-size: 12px;
  font-weight: 500;
}

.task-description {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.timeline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

